<template>
	<view class="content">
		<u-sticky zIndex="10">
			<!-- 搜索框 -->
			<view class="header ffffff paddinglr" :style="{paddingTop:80+'rpx'}">
				<view class="searchBox">
					<!-- <view class="searchBox" @click="goSearch"> -->
					<u-icon name="search" color="rgba(202, 202, 202, 1)" size="22"></u-icon>
					<input class="searchInput" placeholder-class="searchPlaceholder" type="text" placeholder="搜索关键字"
						v-model="keyword" @focus="searchFocus" confirm-type="search" @confirm="init">
				</view>
			</view>
			<!-- tab栏 -->
			<view class="ffffff paddinglr" style="margin-left: -15rpx;" v-if="tabflag">
				<u-tabs :list="tabList" @click="change" lineColor="rgba(243, 39, 28, 1)" :activeStyle="{
			    color: '#000000',
			    fontWeight: 800,
			    transform: 'scale(1.05)'}" :inactiveStyle="{
			    color: '#666666',
			    transform: 'scale(1)'
			}"></u-tabs>
			</view>
			<!-- 导航栏 -->
			<view class="padding ffffff">
				<view class="flexbetween">
					<scroll-view class="scroll-view_H" scroll-x>
						<view class="flexleft">
							<view :class="index==active?'xuanzhong margin_right2':'weixuanzhong margin_right2'"
								v-for="(item,index) in tabList[tabActives].childList" :key="index"
								@click="changeNav(index)">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
					<view class="screen text_five color_jiu flexbetween" v-show="tabActive==5&&active==0"
						@click="show=true">
						<text>筛选</text>
						<u-icon name="arrow-down" color="rgba(153, 153, 153, 1)" size="12"></u-icon>
					</view>
				</view>
			</view>
			<!-- 天学视频、展示分类 -->
			<view class="paddinglr padding_bottom ffffff" v-if="tabActive==2&&active!=2">
				<scroll-view class="scroll-view_H" scroll-x>
					<view class="flexleft">
						<view :class="index==studyActive?'xuanzhong margin_right2':'weixuanzhong margin_right2'"
							v-for="(item,index) in tabList[tabActives].childList[active].childList" :key="index"
							@click="changeCate(index,item)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-sticky>
		<view class="backFA padding">
			<!-- 简介 -->
			<view v-show="tabActive==0">
				<!-- 简介 -->
				<view v-show="active==0">
					<!-- 简介介绍 -->
					<view class="margin_top">
						<view class="">
							<view class="margin_top text2856 brief">
								<u-parse :content="dataAll.index_introduce"></u-parse>
							</view>
						</view>
					</view>
					<!-- 价值观 -->
					<!-- <view class="margin_top">
						<view class="">
							<view class="flexleft">
								<image src="/static/image/home/zhuan.png" style="width: 35.59rpx;height: 35.59rpx;">
								</image>
								<view class="text3280 margin_left2">价值观</view>
							</view>
							<view class="margin_top text2856">让天下人少走弯路，和谐健康社会。</view>
						</view>
					</view> -->
					<!-- 使命 -->
					<!-- <view class="margin_top">
						<view class="">
							<view class="flexleft">
								<image src="/static/image/home/shiming.png" style="width: 39.54rpx;height: 39.54rpx;">
								</image>
								<view class="text3280 margin_left2">使命</view>
							</view>
							<view class="margin_top text2856">让天下人少走弯路，和谐健康社会。</view>
						</view>
					</view> -->
					<!-- 愿景 -->
					<!-- <view class="margin_top">
						<view class="">
							<view class="flexleft">
								<image src="/static/image/home/yuanjing.png" style="width: 39.54rpx;height: 39.54rpx;">
								</image>
								<view class="text3280 margin_left2">愿景</view>
							</view>
							<view class="margin_top text2856">让天下人少走弯路，和谐健康社会。</view>
						</view>
					</view> -->
				</view>
				<!-- 功能介绍 -->
				<view v-show="active==1">
					<!-- 八大板块的功能介绍 -->
					<view class="margin_top">
						<view class="">
							<view class="flexleft">
								<image src="/static/image/home/bada.png" mode="" style="width: 38rpx;height: 38rpx;">
								</image>
								<view class="text3280 margin_left2">功能介绍</view>
							</view>
							<view class="margin_top text2856">
								<u-parse :content="dataAll.index_function_introduce"></u-parse>
							</view>
						</view>
					</view>
				</view>
				<!-- 声明 -->
				<view v-show="active==2">
					<!-- 声明 -->
					<view class="margin_top">
						<view class="">
							<view class="flexleft">
								<image src="/static/image/home/bada.png" mode="" style="width: 38rpx;height: 38rpx;">
								</image>
								<view class="text3280 margin_left2">声明</view>
							</view>
							<view class="margin_top text2856">
								<u-parse :content="dataAll.index_declaration"></u-parse>
							</view>
						</view>
					</view>
				</view>
				<!-- 联系方式 -->
				<view v-show="active==3">
					<!-- 合作服务联系方式 -->
					<view class="margin_top">
						<view class="">
							<view class="flexleft">
								<image src="/static/image/home/hezuo.png" style="width: 38rpx;height: 38rpx;">
								</image>
								<view class="text3280 margin_left2">
									合作服务联系方式
								</view>
							</view>
							<view class="margin_top2" v-show="dataAll.cooprate_tel">
								<view class="contact">
									<view class="left">电话</view>
									<view class="right" @click="phone(dataAll.cooprate_tel)">{{dataAll.cooprate_tel}}
									</view>
								</view>
								<view class="contact" v-show="dataAll.cooprate_wx">
									<view class="left">微信</view>
									<view class="right" @click="copycontent(dataAll.cooprate_wx)">
										{{dataAll.cooprate_wx}}
									</view>
								</view>
								<view class="contact" v-show="dataAll.cooprate_qq">
									<view class="left">QQ</view>
									<view class="right" @click="copycontent(dataAll.cooprate_qq)">
										{{dataAll.cooprate_qq}}
									</view>
								</view>
								<view class="contact" v-show="dataAll.cooprate_email">
									<view class="left">邮箱</view>
									<view class="right" @click="copycontent(dataAll.cooprate_email)">
										{{dataAll.cooprate_email}}
									</view>
								</view>
								<view class="contact">
									<view class="left">二维码</view>
									<view class="qrCode" @click="lbtpriview(0,dataAll.cooprate_image,1)">
										<image :src="dataAll.cooprate_image" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 客户服务联系方式 -->
					<view class="margin_top">
						<view class="">
							<view class="flexleft">
								<image src="/static/image/home/hezuo.png" style="width: 38rpx;height: 38rpx;">
								</image>
								<view class="text3280 margin_left2">
									客户服务联系方式
								</view>
							</view>
							<view class="margin_top2">
								<view class="contact" v-show="dataAll.client_tel">
									<view class="left">电话</view>
									<view class="right" @click="phone(dataAll.client_tel)">{{dataAll.client_tel}}</view>
								</view>
								<view class="contact" v-show="dataAll.client_wx">
									<view class="left">微信</view>
									<view class="right" @click="copycontent(dataAll.client_wx)">{{dataAll.client_wx}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="pageShow">
				<!-- 天问 -->
				<view
					v-show="tabActive==1 || tabActive==3 || tabActive==4 || (tabActive==5&& active!=1) || tabActive==6 || tabActive==7">
					<view class="margin_bottom3">
						<view class="teacherBox" v-for="item in list.data" :key="item.id"
							@click="goServiceInfo(item.id)">
							<view class="left" v-if="item.user">
								<image :src="item.user.avatar" mode="widthFix"></image>
							</view>
							<view class="right">
								<view class="name" v-if="item.user">{{item.user.nickname}}</view>
								<view class="flexbetween">
									<view class="price">￥{{item.price}}</view>
									<view class="button" @click.stop="connection(item)">聊一聊</view>
								</view>
							</view>
							<view class="trade" v-show="item.service_state">营业中</view>
							<view class="rest" v-show="!item.service_state">休息中</view>
						</view>
					</view>
				</view>
				<!-- 天学 -->
				<view v-show="tabActive==2">
					<!-- 视频 -->
					<view class="margin_bottom3" v-show="active==0">
						<view class="videoBox backFA radius" v-for="item in list.data" :key="item.id"
							@click="goVideoInfo(item.id)">
							<!-- 横向 -->
							<view class="video" v-if="item.format==0">
								<image :src="item.image_text" mode="widthFix"></image>
							</view>
							<!-- 竖向 -->
							<!-- <view class="videoFormat" v-if="item.format==1">
								<image :src="item.image_text" mode="aspectFill"></image>
							</view> -->
							<view class="videoFormat" :style="{backgroundImage:`url(${item.image_text})`}"
								v-if="item.format==1"></view>
							<view class="margin_top videoText">
								{{item.title}}
							</view>
							<!-- <view class="margin_top2 text_w color_ling" style="font-weight: 400;padding: 0 20rpx;">
							{{item.description}}
						</view> -->
							<view class="margin_top4 flexbetween">
								<view class="flexleft" v-if="item.user">
									<view class="sculpture">
										<image :src="item.user.avatar" mode="widthFix"></image>
									</view>
									<view class="nickName">{{item.user.nickname}}</view>
								</view>
								<view class="flexleft">
									<!-- 未收藏 -->
									<view v-show="!item.is_collect" @click.stop="collect(item.id)">
										<u-icon name="star" color="rgba(102, 102, 102, 1)" size="14"></u-icon>
									</view>
									<!-- 已收藏 -->
									<view v-show="item.is_collect" @click.stop="collect(item.id)">
										<u-icon name="star-fill" color="rgba(255, 122, 0, 1)" size="14"></u-icon>
									</view>
									<view class="collect">{{item.collect_num}}</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 展示 -->
					<view class="margin_bottom3" v-show="active==1">
						<view class="margin_bottom3 ffffff radius padding word_wrap" v-for="item in list.data"
							:key="item.id" @click="goForumInfo(item.id,1)">
							<view class="flexstart">
								<view style="margin-right: 20rpx;">
									<view class="image_ya" v-if="item.user">
										<image :src="item.user.avatar" mode="widthFix"></image>
									</view>
								</view>
								<view>
									<view class="text_g color_ling" v-if="item.user">{{item.user.nickname}}</view>
									<view class="year text_a  color_jiu">{{item.createtime_text}}</view>
								</view>
							</view>
							<view class="margin_top4 text_w color_ling lianghang">
								{{item.title}}
							</view>
							<view class="margin_top2 text_w color_ling lianghang" style="font-weight: 400;">
								{{item.description}}
							</view>
							<view class="margin_top1 flexleft flex_wrap">
								<view class="forumBox" v-for="(value,i) in item.images_arr" :key="i"
									@click.stop="lbtpriview(i,item.images_arr,2)">
									<image :src="value" mode="widthFix"></image>
								</view>
							</view>
							<view class="forumButton flexbetween">
								<!-- <view>
								<u-icon name="share-square" color="rgba(153, 153, 153, 1)" size="14"></u-icon>
							</view> -->
								<image class="imgForward" src="/static/image/home/forward.png" mode=""
									@click.stop="goShare(item,1)">
								</image>
								<view class="flexleft">
									<view class="margin_right3">
										<!-- 评论 -->
										<!-- <view class="flexbottom">
										<u-icon name="chat" color="rgba(153, 153, 153, 1)" size="14"></u-icon>
										<view class="text_f color_jiu">62</view>
									</view> -->
										<!-- 评论 -->
										<!-- <view class="flexleft">
											<image class="imgComment margin_right1" src="/static/image/home/comment.png"
												mode="widthFix"></image>
											<view class="text_f color_jiu">{{item.comment_num}}</view>
										</view> -->
									</view>
									<view class="margin_right3">
										<view class="flexbottom">
											<!-- 未点赞 -->
											<image class="imgLike margin_right1" src="/static/image/home/like.png"
												mode="" v-show="!item.is_like" @click.stop="like(item.id)">
											</image>
											<!-- 已点赞 -->
											<image class="imgLike margin_right1" src="/static/image/home/like-fill.png"
												mode="" v-show="" v-show="item.is_like" @click.stop="like(item.id)">
											</image>
											<view class="text_f color_jiu">{{item.like_num}}</view>
										</view>
									</view>
									<view>
										<view class="flexbottom">
											<!-- 未收藏 -->
											<image class="imgStar margin_right1" src="/static/image/home/star.png"
												mode="" v-show="!item.is_collect" @click.stop="collect(item.id)">
											</image>
											<!-- 已收藏 -->
											<image class="imgStar margin_right1" src="/static/image/home/star-fill.png"
												mode="" v-show="item.is_collect" @click.stop="collect(item.id)"></image>
											<view class="text_f color_jiu">{{item.collect_num}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 打赏抢答 -->
					<view class="margin_bottom3" v-show="active==2">
						<view class="margin_bottom3 ffffff radius word_wrap" style="padding:30rpx;"
							v-for="item in list.data" :key="item.id" @click="goForumInfo(item.id,2)">
							<view class="flexstart margin_bottom2">
								<view style="margin-right: 20rpx;">
									<view class="image_ya" v-if="item.user">
										<image :src="item.user.avatar" mode="widthFix"></image>
									</view>
								</view>
								<view>
									<view class="text_g color_ling" v-if="item.user">{{item.user.nickname}}</view>
									<view class="year text_a  color_jiu">{{item.createtime_text}}</view>
								</view>
							</view>
							<view class="flexbetween margin_top2">
								<view class="reward">
									标金：{{item.price}}元
								</view>
								<view class="year text_a  color_jiu">截止时间：{{item.expiretime_text}}</view>
							</view>
							<view class="margin_top4 text_w color_ling lianghang">
								{{item.title}}
							</view>
							<view class="margin_top2 text_w color_ling lianghang" style="font-weight: 400;">
								{{item.description}}
							</view>
							<view class="margin_top1 flexleft flex_wrap">
								<view class="forumBox" v-for="(value,i) in item.images_arr" :key="i"
									@click.stop="lbtpriview(i,item.images_arr,2)">
									<image :src="value" mode="widthFix"></image>
								</view>
							</view>
							<view class="forumButton flexbetween">
								<image class="imgForward" src="/static/image/home/forward.png" mode=""
									@click.stop="goShare(item,2)"></image>
								<view class="flexleft">
									<view class="margin_right3">
										<!-- 评论 -->
										<view class="flexleft">
											<image class="imgComment margin_right1" src="/static/image/home/comment.png"
												mode="widthFix"></image>
											<view class="text_f color_jiu">{{item.comment_num}}</view>
										</view>
									</view>
									<view class="margin_right3">
										<view class="flexbottom">
											<!-- 未点赞 -->
											<image class="imgLike margin_right1" src="/static/image/home/like.png"
												mode="" v-show="!item.is_like" @click.stop="like(item.id)"></image>
											<!-- 已点赞 -->
											<image class="imgLike margin_right1" src="/static/image/home/like-fill.png"
												mode="" v-show="item.is_like" @click.stop="like(item.id)"></image>
											<view class="text_f color_jiu">{{item.like_num}}</view>
										</view>
									</view>
									<view>
										<view class="flexbottom">
											<!-- 未收藏 -->
											<image class="imgStar margin_right1" src="/static/image/home/star.png"
												mode="" v-show="!item.is_collect" @click.stop="collect(item.id)">
											</image>
											<!-- 已收藏 -->
											<image class="imgStar margin_right1" src="/static/image/home/star-fill.png"
												mode="" v-show="item.is_collect" @click.stop="collect(item.id)"></image>
											<view class="text_f color_jiu">{{item.collect_num}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 天商 -->
				<view v-show="tabActive==500">
					<view class=" flexbetween flex_wrap">
						<view class="dayShop margin_top" v-for="item in list.data" :key="item.id"
							@click="goGoodsInfo(item.id)">
							<view class="imgBox">
								<image :src="item.image_text" mode="widthFix"></image>
							</view>
							<view class="yihang text_a color_san margin_top">{{item.name}}</view>
							<view class="flexleft margin_top">
								<view class="text_c" style="color: #F3271C;margin-right: 20rpx;">￥{{item.price}}</view>
								<view class="color_jiu text_pee">已拼{{item.sale_num}}件</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 天聊 -->
				<view v-show="tabActive==5 && active==1">
					<!-- 打赏抢答 -->
					<view class="margin_bottom3 ffffff radius word_wrap" style="padding:30rpx;"
						v-for="item in list.data" :key="item.id" @click="goForumInfo(item.id,2)">
						<view class="flexstart margin_bottom2" v-if="item.user">
							<view style="margin-right: 20rpx;">
								<view class="image_ya">
									<image :src="item.user.avatar" mode="widthFix"></image>
								</view>
							</view>
							<view>
								<view class="text_g color_ling" v-if="item.user">{{item.user.nickname}}</view>
								<view class="year text_a  color_jiu">{{item.createtime_text}}</view>
							</view>
						</view>
						<view class="flexbetween margin_top2">
							<view class="reward">
								标金：{{item.price}}元
							</view>
							<view class="year text_a  color_jiu">截止时间：{{item.expiretime_text}}</view>
						</view>
						<view class="margin_top4 text_w color_ling lianghang">
							{{item.title}}
						</view>
						<view class="margin_top2 text_w color_ling lianghang" style="font-weight: 400;">
							{{item.description}}
						</view>
						<view class="margin_top1 flexleft flex_wrap">
							<view class="forumBox" v-for="(value,i) in item.images_arr" :key="i"
								@click.stop="lbtpriview(i,item.images_arr,2)">
								<image :src="value" mode="widthFix"></image>
							</view>
						</view>
						<view class="forumButton flexbetween">
							<image class="imgForward" src="/static/image/home/forward.png" mode=""
								@click.stop="goShare(item,2)"></image>
							<view class="flexleft">
								<view class="margin_right3">
									<!-- 评论 -->
									<view class="flexleft">
										<image class="imgComment margin_right1" src="/static/image/home/comment.png"
											mode="widthFix"></image>
										<view class="text_f color_jiu">{{item.comment_num}}</view>
									</view>
								</view>
								<view class="margin_right3">
									<view class="flexbottom">
										<!-- 未点赞 -->
										<image class="imgLike margin_right1" src="/static/image/home/like.png" mode=""
											v-show="!item.is_like" @click.stop="like(item.id)"></image>
										<!-- 已点赞 -->
										<image class="imgLike margin_right1" src="/static/image/home/like-fill.png"
											mode="" v-show="item.is_like" @click.stop="like(item.id)"></image>
										<view class="text_f color_jiu">{{item.like_num}}</view>
									</view>
								</view>
								<view>
									<view class="flexbottom">
										<!-- 未收藏 -->
										<image class="imgStar margin_right1" src="/static/image/home/star.png" mode=""
											v-show="!item.is_collect" @click.stop="collect(item.id)">
										</image>
										<!-- 已收藏 -->
										<image class="imgStar margin_right1" src="/static/image/home/star-fill.png"
											mode="" v-show="item.is_collect" @click.stop="collect(item.id)"></image>
										<view class="text_f color_jiu">{{item.collect_num}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 加号 -->
				<view class="addBox" @click="goAdd" v-show="(tabActive==2&&active!=0)||(tabActive==5&&active==1)">
					<image src="/static/image/home/add.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="flexcenter placeholderBoxTop" v-show="tabActive!=0&&!list.data.length">
				<image class="placeholderBox" src="/static/placeholderimg.png" mode="widthFix"></image>
			</view>
		</view>

		<!-- 筛选弹出层 -->
		<u-popup :show="show" mode="bottom" closeOnClickOverlay @close="show=false">
			<view class="popupBox">
				<view class="title">筛选</view>
				<!-- 性别 -->
				<view class="text_a color_ling">性别</view>
				<view class="flexbetween margin_top2">
					<view :class="!isSex?'select':'noSelect'" @click="isSex=''">全部</view>
					<view :class="isSex==1?'select':'noSelect'" @click="isSex=1">男</view>
					<view :class="isSex==2?'select':'noSelect'" @click="isSex=2">女</view>
				</view>
				<!-- 年龄 -->
				<view class="margin_top5 flexbetween">
					<view class="text_a color_ling">年龄</view>
					<view class="text_a" style="color: #F3271C;">
						{{slider1.rangeValue[0]}}-{{slider1.rangeValue[1]}}
						<text v-show="slider1.rangeValue[1]==99">+</text>
					</view>
				</view>
				<view class="margin_top">
					<view class="demo-slider-range">
						<view class="slider-item">
							<slider-range :value="slider1.rangeValue" :min="slider1.min" :max="slider1.max"
								:step="slider1.step" :bar-height="barHeight" :block-size="blockSize"
								:background-color="backgroundColor" :active-color="slider1.activeColor"
								:format="format1" @change="handleRangeChange"></slider-range>
						</view>
					</view>
				</view>
				<view class="text_a color_ling margin_top">其它条件</view>
				<!-- <view class="margin_top4 flexbetween">
					<view class="text_a color_ling">职业</view>
					<view class="flexleft" @click="occupationShow=true">
						<view class="text_a color_jiu">{{occupationName?occupationName:'不限'}}</view>
						<u-icon name="arrow-right" color="rgba(153, 153, 153, 1)" size="12"></u-icon>
					</view>
				</view> -->
				<view class="margin_top7 flexbetween">
					<view class="text_a color_ling">所在地</view>
					<uni-data-picker :localdata="items" @change="bindPickerChange">
						<view class="flexright">
							<view class="text_a color_jiu">{{location?location:'不限'}}</view>
							<u-icon name="arrow-right" color="rgba(153, 153, 153, 1)" size="12"></u-icon>
						</view>
					</uni-data-picker>
				</view>
				<view class="margin_top7 flexbetween">
					<view class="text_a color_ling">故乡</view>
					<uni-data-picker :localdata="items" @change="bindPickerChange2">
						<view class="flexright">
							<view class="text_a color_jiu">{{birthplace?birthplace:'不限'}}</view>
							<u-icon name="arrow-right" color="rgba(153, 153, 153, 1)" size="12"></u-icon>
						</view>
					</uni-data-picker>
				</view>
				<!-- <view class="margin_top7 flexbetween">
					<view class="text_a color_ling">星座</view>
					<view class="flexleft">
						<view class="text_a color_jiu" @click="star_signShow=true">{{star_signName?star_signName:'不限'}}
						</view>
						<u-icon name="arrow-right" color="rgba(153, 153, 153, 1)" size="12"></u-icon>
					</view>
				</view> -->
				<view class="margin_top6 flexbetween">
					<view class="clear" @click="clear">重置</view>
					<view class="confirm" @click="screen">确认</view>
				</view>
			</view>
		</u-popup>
		<u-picker :show="occupationShow" title="选择职业" :columns="occupation_arr" keyName="name"
			@confirm="occupationConfirm" @cancel="occupationShow=false"></u-picker>
		<u-picker :show="star_signShow" title="选择星座" :columns="star_sign_arr" keyName="name" @confirm="star_signConfirm"
			@cancel="star_signShow=false"></u-picker>
		<u-popup :show="shareShow" round="20" mode="center" @close="shareShow=false">
			<view class="popupBoxShare">
				<!-- <view class="title">分享拼单</view> -->
				<!-- <view class="text_g color_ling margin_top4">
					还差<text style="color: rgba(243, 39, 28, 1);"></text>人，赶快邀请好友拼单吧
				</view> -->
				<view class="flexbetween">
					<view class="text margin_right7" @click="wxShareFriends">
						<image class="imgBox" src="/static/image/home/weixin.png" mode="widthFix"></image>
						<view class="text_b color_ling margin_top2">微信好友</view>
					</view>
					<view class="text">
						<image class="imgBox" src="/static/image/home/QQ.png" mode="" @click="qqShareFriends">
						</image>
						<view class="text_b color_ling margin_top2">QQ好友</view>
					</view>
				</view>
			</view>
		</u-popup>
		<tabbardi :current="0"></tabbardi>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'
	import citys from "@/static/city/city.js";
	// import lyg_popup from '@/components/lyg-popup/lyg-popup.vue';
	import {
		mapMutations
	} from 'vuex';

	export default {
		components: {
			SliderRange,
			// lyg_popup
		},

		data() {
			return {
				shareShow: false, //分享
				keyword: "",
				show: false,
				active: 0,
				tabActive: 0,
				studyActive: 0,
				tabList: [{
						name: '简介',
						childList: [{
							name: "简介"
						}, {
							name: "功能介绍"
						}, {
							name: "声明"
						}, {
							name: "联系方式"
						}, ]
					}, {
						name: '天问',
						childList: []
					}, {
						name: '天学',
						childList: [{
							name: "视频",
							childList: []
						}, {
							name: "大众展示",
							childList: []
						}, {
							name: "打赏抢答"
						}]
					}, {
						name: '天心',
						childList: []
					}, {
						name: '天养',
						childList: []
					},
					{
						name: '天聊',
						childList: [{
							name: "打赏抢答",
						}]
					}, {
						name: '天鉴',
						childList: []
					}, {
						name: '天融',
						childList: []
					}
				],
				systemBarHeight: "",
				dataAll: {}, //简介信息
				page: 1,
				list: {
					data: []
				},
				items: citys.data,
				isSex: '', // '全部 1男 2女
				min_age: 0, //最小年龄
				max_age: 0, //最大年龄
				location: "", //所在地
				birthplace: "", //故乡
				occupationShow: false,
				occupationName: "",
				occupation_arr: [], //职业
				star_signShow: false,
				star_signName: "",
				star_sign_arr: [], //星座
				isGetInit: false,

				// 选择年龄
				barHeight: 3,
				blockSize: 26,
				backgroundColor: '#EEEEF6',
				slider1: {
					min: 18,
					max: 99,
					step: 1,
					activeColor: '#F3271C',
					rangeValue: [18, 99],
				},
				pageShow: false,
				shareInfo: {}, //分享信息
				forumType: 0, //类型
				user_id: uni.getStorageSync("user_id"), //当前登录的用户id
				// videoCateList:[],//视频分类
				// cateList:[],//展示分类
				community_category_id: "", //视频、展示分类id
				tabflag: true,
				isvivo: false
			}
		},
		watch: {
			tabActive() {
				this.active = 0
				this.page = 1
				this.init()
			}
		},
		computed: {
			tabActives() {
				if (!this.isvivo) {
					return this.tabActive
				} else {
					if (this.tabActive == 0) return 0
				}
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.getCateList()
			this.systemBarHeight = getApp().globalData.systemBarHeight * 2 + 40
			this.getHomeInit()
			// this.getinfo()
			// this.isvivo = this.getisvivo()
			// this.isvivo = true
			if (this.isvivo) {
				this.tabList = [{
						name: '简介',
						childList: [{
							name: "简介"
						}, {
							name: "功能介绍"
						}, {
							name: "声明"
						}, {
							name: "联系方式"
						}, ]
					}
				]
			}
		},
		onShow() {
			this.$nextTick(() => {
				// 解决uview u-tab，下划线异常
				this.tabflag = false
				this.tabflag = true
			});
			if (this.isGetInit) {

				let _this = this;

				_this.list = {
					data: []
				};
				_this.page = 1;
				this.init()
			}
			this.getUserInfo()
			// let token = uni.getStorageSync("token")
			// console.log(token,"token555555555555");
			// if (token) {
			// 	this.$store.dispatch('connectSocket', token)
			// }
		},
		methods: {
			// popupState(state) {

			// },
			getisvivo() {
				const systemInfo = uni.getSystemInfoSync();
				const brand = systemInfo.brand.toLowerCase(); // 转为小写方便判断
				return brand.includes('vivo');
			},
			searchFocus(e) {
				// console.log(e)
				// if (this.tabActive == 2 || (this.tabActive == 6 && this.active == 1)) {
				// 	return false
				// }
				// uni.navigateTo({
				// 	url: "/pages/index/cateSearch"
				// })
			},
			phone(p) { //拨打电话
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			copycontent(value) { //复制文本
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						httpRequest.toast("复制成功")
					}
				});
			},
			connection(item) {
				if (item.user.id == this.user_id) {
					httpRequest.toast("自己不能和自己聊天哦！");
					return false
				}
				let that = this
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.requestChat('/api/user/addFriends', 'GET', {
					firend_id: item.user.id,
					sendtype: 1,
					user_id: uni.getStorageSync('user_id')
				}).then(res => {
					uni.hideLoading()
					let data = {
						firend_id: item.user.id,
						friend_name: item.user.nickname,
						firend_avatar_text: item.user.avatar
					}
					uni.navigateTo({
						url: "/pages/chat/chat?msg=" + encodeURIComponent(JSON.stringify(data))
					})
				})
			},
			format1(val) {
				return val
			},
			handleRangeChange(e) {
				console.log(e);
				this.slider1.rangeValue = e
				this.min_age = this.slider1.rangeValue[0]
				this.max_age = this.slider1.rangeValue[1]
				this.max_age = this.max_age == 99 ? 1000 : this.max_age
			},
			// 获取首页数据
			getHomeInit() {
				httpRequest.request("/api/index/index", "GET", {}).then(res => {
					this.dataAll = res.data
					if (!this.isvivo) {
						this.tabList[1].childList = res.data.service_tags.tags1 //天问子标签
						this.tabList[2].childList[0].name = res.data.community_type1_alias //天学子标签
						this.tabList[2].childList[1].name = res.data.community_type2_alias //天学子标签
						this.tabList[2].childList[2].name = res.data.community_type3_alias //天学子标签
						this.tabList[3].childList = res.data.service_tags.tags2 //天心子标签
						this.tabList[4].childList = res.data.service_tags.tags3 //天养子标签
						this.tabList[5].childList = res.data.service_tags.tags4.concat(this.tabList[5]
							.childList) //天聊子标签
						this.tabList[6].childList = res.data.service_tags.tags5 //天鉴子标签
						this.tabList[7].childList = res.data.service_tags.tags6 //天融子标签
						// this.tabList[5].childList = res.data.goods_category //天商子标签
					} else {
						// this.tabList[1].childList[0].name = res.data.community_type1_alias //天学子标签
						// this.tabList[1].childList[1].name = res.data.community_type2_alias //天学子标签
						// this.tabList[1].childList[2].name = res.data.community_type3_alias //天学子标签
						// this.tabList[2].childList = res.data.service_tags.tags2 //天心子标签
						// this.tabList[1].childList = res.data.service_tags.tags3 //天养子标签
						// this.tabList[3].childList = res.data.service_tags.tags4.concat(this.tabList[3]
						// 	.childList) //天聊子标签
						// this.tabList[4].childList = res.data.service_tags.tags5 //天鉴子标签
						// this.tabList[5].childList = res.data.service_tags.tags6 //天融子标签
						// this.tabList[5].childList = res.data.goods_category //天商子标签
					}
					console.log(this.tabList);
					this.init()
				})
			},
			getUserInfo() { //用户信息
				let _this = this
				let is_login = httpRequest.checkIsLogin();
				if (is_login) {
					httpRequest.request('/api/user/index', 'GET', {}).then(res => {
						_this.$store.commit("setCanPublist", res.data.can_publish)
					})
				} else {
					_this.$store.commit("setCanPublist", 0)
				}

			},
			getCateList() { //展示分类、视频分类
				let _this = this
				httpRequest.request('/api/community/getcategory', 'GET', {}).then(res => {
					if (res.code == 1) {
						if (!this.isvivo) {
							this.tabList[2].childList[0].childList = res.data.category1 //天学子标签
							this.tabList[2].childList[1].childList = res.data.category2 //天学子标签
						} else {
							// this.tabList[1].childList[0].childList = res.data.category1 //天学子标签
							// this.tabList[1].childList[1].childList = res.data.category2 //天学子标签
						}
						this.community_category_id = res.data.category1[0].id
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			async init(isPage, page) {
				let _this = this;
				if (this.tabActive == 0) { //如果标签为简介不调初始化接口
					return false
				}
				let data = {
					category_id: this.tabList[this.tabActives].childList[this.active].id, //分类id
					keyword: this.keyword,
					page: page || 1
				}
				let url = ""
				// 服务类别:1=天问,2=天心,3=天养,4=天聊,5=天鉴,6=天融
				let tabActive = this.tabActive
				let service_type = {
					"1": "1", //天问
					"3": "2", //天心
					"4": "3", //天养
					"5": "4", //天聊
					"6": "5", //天鉴
					"7": "6" //天融
				}
				if (tabActive == 1 || tabActive == 3 || tabActive == 4 || tabActive == 6 || tabActive == 7) {
					data = {
						service_type: this.isvivo?(this.tabActives==0?1:3):service_type[this.tabActives],
						service_tags_id: this.tabList[this.tabActives].childList[this.active].id,
						keyword: this.keyword,
						page: page || 1
					}
					url = "/api/service/getlist"
				} else if (tabActive == 2) {
					data = {
						page: page || 1,
						type: this.active + 1, // 类型:1=视频,2=论坛,3=打赏抢答
						service_type: 2, //类别:1=天聊,2=天学
						keyword: this.keyword,
						community_category_id: this.community_category_id, //分类id
						// gender: _this.isSex, //性别:0=保密,1=男,2=女
						// min_age: _this.min_age, //最小年龄
						// max_age: _this.max_age, //最大年龄
						// star_sign: _this.star_signName, //星座（中文）
						// occupation: _this.occupationName, //职业（中文）
						// location: _this.location, //所在地（中文）
						// birthplace: _this.birthplace, //故乡（中文）
						// service_type: service_type[this.tabActives],
						// service_tags_id: this.tabList[this.tabActives].childList[this.active].id,
					}
					url = "/api/community/getlist"
				}
				// else if (tabActive == 5) {
				// 	url = "/api/goods/getlist"
				// } 
				else if (tabActive == 5 && this.active == 0) {
					data = {
						page: page || 1,
						type: 3, // 类型:1=视频,2=论坛,3=打赏抢答
						// service_type: service_type[this.tabActives],
						service_type: service_type[this.tabActives],
						service_tags_id: this.tabList[this.tabActives].childList[this.active].id,
						keyword: this.keyword,
						gender: _this.isSex, //性别:0=保密,1=男,2=女
						min_age: _this.min_age == 0 ? "" : _this.min_age, //最小年龄
						max_age: _this.max_age == 0 ? "" : _this.max_age, //最大年龄
						star_sign: _this.star_signName, //星座（中文）
						occupation: _this.occupationName, //职业（中文）
						location: _this.location, //所在地（中文）
						birthplace: _this.birthplace, //故乡（中文）
					}
					console.log(data)
					url = "/api/service/getlist"
				} else if (tabActive == 5 && this.active == 1) {
					data = {
						page: page || 1,
						type: 3, // 类型:1=视频,2=论坛,3=打赏抢答
						service_type: 1, //类别:1=天聊,2=天学
						keyword: this.keyword,
					}
					url = "/api/community/getlist"
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						if (_this.tabActive == 2 && _this.active == 0) {
							res.data.data.forEach((item, index) => {
								uni.getImageInfo({
									src: item.image_text,
									success(image) {
										if (Number(image.width) > Number(image.height)) { //横向
											_this.$set(item, "format", 0)
										} else { //竖向
											_this.$set(item, "format", 1)
										}
										// console.log(image.width,index);
										// console.log(image.height,index);
									}
								});
							})
						}
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
						_this.isGetInit = true
						_this.pageShow = true
						// uni.hideLoading();
						// console.log(_this.list.data, "list.data")
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {

				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				// if (this.tabActive != 0) { //如果标签为简介不调初始化接口
				// 	uni.showLoading({
				// 	    title: '加载中...', // 弹窗提示内容
				// 	    mask: true // 是否显示透明蒙层，防止触摸穿透
				// 	});
				// }


				_this.page = page;
				_this.init(true, page);
			},
			clear() { //重置
				this.keyword = ""
				this.isSex = ''
				this.min_age = 0
				this.max_age = 0
				this.star_signName = ""
				this.occupationName = ""
				this.location = ""
				this.birthplace = ""
				this.show = false
				this.init()
			},
			screen() { //打赏抢答筛选
				this.show = false
				this.init()
			},
			changeNav(index) { //导航栏切换
				this.active = index
				if (this.tabActive == 2 && this.active != 2) {
					this.studyActive = 0
					this.community_category_id = this.tabList[this.tabActives].childList[this.active].childList[this
						.studyActive].id
				}
				this.pageShow = false
				this.init()
			},
			changeCate(index, item) { //视频、展示分类切换
				this.studyActive = index
				this.community_category_id = item.id
				this.pageShow = false
				this.init()
			},
			change(e) { //tab栏切换
				if (!this.isvivo) {
					this.tabActive = e.index
				} else {
					if (e.index == 0) {
						this.tabActive = e.index
					} else{
						this.tabActive = 4
					}
				}
				console.log(this.tabActive);
				this.pageShow = false
			},
			getinfo() {
				let _this = this
				httpRequest.request('/api/user/profile_pre', 'GET', {}).then(res => {
					let arr1 = res.data.occupation_arr
					let occupation_arr = []
					for (let key in arr1) {
						occupation_arr.push({
							id: key,
							name: arr1[key]
						})
					}
					this.occupation_arr.push(occupation_arr)
					let arr2 = res.data.star_sign_arr
					let star_sign_arr = []
					for (let key in arr2) {
						star_sign_arr.push({
							id: key,
							name: arr2[key]
						})
					}
					this.star_sign_arr.push(star_sign_arr)
				})
			},
			like(id) { //点赞、取消点赞
				let _this = this
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				httpRequest.request('/api/community/likes', 'GET', {
					community_id: id,
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						this.init()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			collect(id) { //收藏、取消收藏
				let _this = this
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				httpRequest.request('/api/community/collects', 'GET', {
					community_id: id,
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						this.init()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			occupationConfirm(e) { //确认职业
				// this.occupation = e.value[0].id
				this.occupation = e.value[0].name
				this.occupationName = e.value[0].name
				this.occupationShow = false
			},
			star_signConfirm(e) { //确认星座
				// this.star_sign = e.value[0].id
				this.star_sign = e.value[0].name
				this.star_signName = e.value[0].name
				this.star_signShow = false
			},
			bindPickerChange(val) { //选择所在地
				let area = val.detail.value
				this.location = area[0].text + "/" + area[1].text + "/" + area[2].text
			},
			bindPickerChange2(val) { //选择故乡
				let area = val.detail.value
				this.birthplace = area[0].text + "/" + area[1].text + "/" + area[2].text
			},
			goMessage() { //消息列表
				uni.navigateTo({
					url: "/pages/message/message"
				})
			},
			goVideoInfo(id) { //视频详情
				uni.navigateTo({
					url: "/pages_index/videoInfo?id=" + id
				})
			},
			lbtpriview(index, value, type) {
				let i; //获取当前页面的轮播图数据
				if (type == 1) {
					i = [value]
				} else {
					i = value
				}
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					loop: true, //循环预览只在APP生效
				})
			},
			goAdd() { //发布视频、发布展示、发布问题
				if (this.tabActive == 2) { //天学
					if (this.active == 0) {
						// uni.navigateTo({ //发布视频
						// 	url: "/pages_index/addVideo"
						// })
					} else if (this.active == 1) { //发布展示
						uni.navigateTo({
							url: "/pages_index/addForum"
						})
					} else {
						if (this.$store.state.can_publish == 0) {
							httpRequest.toast("您暂时没有发布打赏抢答的权限！");
							return false
						}
						uni.navigateTo({ //发布问题
							url: "/pages_index/addProblem?type=2"
						})
					}
				} else if (this.tabActive == 5) { //天聊
					if (this.$store.state.can_publish == 0) {
						httpRequest.toast("您暂时没有发布打赏抢答的权限！");
						return false
					}
					uni.navigateTo({ //发布问题
						url: "/pages_index/addProblem?type=1"
					})
				}
			},
			goForumInfo(id, type) { //展示、打赏抢答详情
				uni.navigateTo({
					url: "/pages_index/forumInfo?id=" + id + "&type=" + type
				})
			},
			goServiceInfo(id) { //服务详情
				uni.navigateTo({
					url: "/pages_index/serviceInfo?id=" + id
				})
			},
			goGoodsInfo(id) { //商品详情
				uni.navigateTo({
					url: "/pages_index/goodsInfo?id=" + id
				})
			},
			goSearch() { //搜索商品
				uni.navigateTo({
					url: "/pages/index/search"
				})
			},
			goShare(item, type) { //转发
				this.shareShow = true
				this.shareInfo = item
				this.forumType = type
			},
			addShare(community_id) { //增加转发量
				console.log("调用了！！！")
				let _this = this;
				httpRequest.request('/api/community/shares', 'POST', {
					community_id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						httpRequest.toast("分享成功！");
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			wxShareFriends() { //微信分享
				let _this = this
				let shareInfo = _this.shareInfo
				uni.share({
					provider: "weixin",
					type: 0,
					title: shareInfo.title || "",
					href: `https://hongnwh.yuntaiqikeji.com/h5/#/?id=${shareInfo.id}&type=${_this.forumType}`,
					scene: "WXSceneSession",
					summary: shareInfo.description || "",
					imageUrl: "https://hongnwh-1318979827.cos.ap-shanghai.myqcloud.com/uploads/20230803/49aef582328737659ba0ef126c7de37a.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						console.log(_this.shareInfo, "shareInfo")
						_this.addShare(shareInfo.id)
						_this.shareShow = false
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			qqShareFriends() { //QQ分享
				let _this = this
				let shareInfo = _this.shareInfo
				let url = `https://hongnwh.yuntaiqikeji.com/h5/#/?id=${shareInfo.id}&type=${_this.forumType}`
				uni.share({
					provider: "qq",
					type: 1,
					title: shareInfo.title || "",
					href: url,
					summary: shareInfo.description || "",
					// imageUrl:"www.wanxiangshide.xyz/uploads/20230722/68c2959eb3a63faff5248380f80bc5c1.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						_this.addShare(shareInfo.id)
						_this.shareShow = false
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 150rpx;
	}

	// .widthvw{
	// 	width: 200rpx !important;
	// }
	.backFA {
		background-color: #FAFAFA;
	}

	.brief ::v-deep._img {
		width: 35.59rpx !important;
		height: 35.59rpx !important;
		// margin-right: 20rpx;
		margin-bottom: -5rpx;
	}

	// 搜索框
	.header {
		// margin-top: 96rpx;
		display: flex;
		justify-content: space-between;
	}

	.searchBox {
		padding: 18rpx 30rpx;
		background: #F3F3F3;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		width: 100%;

		.searchInput {
			margin-left: 20rpx;
			flex: 1;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}

		.searchPlaceholder {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #C5C5C5;
		}
	}

	// 简介
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.weixuanzhong {
		padding: 10rpx 35rpx;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.xuanzhong {
		padding: 10rpx 35rpx;
		background: rgba(243, 39, 28, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #F3271C;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.text3280 {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.text2856 {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.contact {
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #F1F1F1;

		.left {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.right {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.qrCode {
			width: 141rpx;
			height: 141rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 天问
	.teacherBox {
		background-color: #ffffff;
		padding: 36rpx 15rpx 36rpx 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		position: relative;

		.left {
			width: 152rpx;
			height: 152rpx;
			border-radius: 21rpx 21rpx 21rpx 21rpx;
			margin-right: 30rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;

			.name {
				font-size: 30rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #000000;
			}

			.price {
				font-size: 26rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #F3271C;
			}

			.button {
				padding: 10rpx 35rpx;
				text-align: center;
				border: 2rpx solid rgba(243, 39, 28, 1);
				border-radius: 39rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #F3271C;
			}
		}

		// 营业中
		.trade {
			background: rgba(19, 196, 99, .1);
			border-radius: 0rpx 14rpx 0rpx 14rpx;
			padding: 7rpx 25rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #13C463;
			position: absolute;
			top: 0;
			right: 0;
		}

		// 休息中
		.rest {
			background: rgba(255, 138, 2, .1);
			border-radius: 0rpx 14rpx 0rpx 14rpx;
			padding: 7rpx 25rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FF8A02;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	// 天学
	.videoBox {
		margin-bottom: 30rpx;

		.video {
			height: 353rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
			}
		}

		.videoFormat {
			height: 653rpx;
			background-repeat: no-repeat;
			background-position: center;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			// height: 653rpx;
			// image {
			// 	width: 100%;
			// 	height: 100%;
			// 	border-radius: 12rpx 12rpx 12rpx 12rpx;
			// }
		}

		.videoText {
			padding: 0 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.sculpture {
			width: 52rpx;
			height: 52rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.nickName {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
		}

		.collect {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			margin-left: 10rpx;
		}
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.forumBox {
		width: 33.3%;
		height: 194rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;

		image {
			width: 193rpx;
			height: 100%;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
		}
	}

	.forumButton {
		margin-top: 65rpx;
	}

	.reward {
		min-width: 144rpx;
		box-sizing: border-box;
		background: rgba(243, 39, 28, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 5rpx 15rpx;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.imgForward {
		width: 32.71rpx;
		height: 32.71rpx;
		display: block;
	}

	.imgComment {
		width: 34.71rpx;
		height: 34.71rpx;
		display: block;
	}

	.imgLike {
		width: 35rpx;
		height: 35rpx;
		display: block;
	}

	.imgStar {
		width: 34.88rpx;
		height: 34.88rpx;
		display: block;
	}

	// 天商
	.dayShop {
		.imgBox {
			width: 338rpx;
			height: 338rpx;
			border-radius: 11rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 筛选
	.screen {
		width: 115rpx;
		padding: 7rpx 0;
		background: rgba(217, 217, 217, .1);
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		text-align: center;
	}

	// 加号
	.addBox {
		width: 92rpx;
		height: 92rpx;
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 筛选弹出层
	.popupBox {
		padding: 50rpx 60rpx 80rpx;

		.title {
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}

		.noSelect {
			width: 197rpx;
			height: 77rpx;
			line-height: 77rpx;
			background: #EFEFEF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #EFEFEF;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.select {
			width: 197rpx;
			height: 77rpx;
			line-height: 77rpx;
			background: rgba(243, 39, 28, 0.1);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #F3271C;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #F3271C;
		}

		.clear {
			width: 300rpx;
			height: 82rpx;
			line-height: 82rpx;
			text-align: center;
			border-radius: 41rpx;
			border: 2rpx solid rgba(243, 39, 28, 1);
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #F3271C;
		}

		.confirm {
			width: 300rpx;
			height: 82rpx;
			line-height: 82rpx;
			text-align: center;
			border-radius: 41rpx;
			background-color: rgba(243, 39, 28, 1);
			border: 2rpx solid rgba(243, 39, 28, 1);
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	::v-deep.u-popup__content {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.popupBoxShare {
		padding: 100rpx 100rpx;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			text-align: center;
		}

		.imgBox {
			width: 112rpx;
			height: 112rpx;
		}
	}
</style>